<template>
  <main id="maincontent" role="main">
    <div class="container container--zone" role="region">
      <div class="region region--primary">
        <div class="component component--module page-header">
          <div class="column column--full">
            <header class="header header--page">
              <h1 class="title">
                <span class="label">Barbara Kollmeyer</span>
              </h1>
            </header>
            <ol class="list list--breadcrumbs">
              <li class="breadcrumb__item">
                <a itemprop="item" class="link">
                  <span itemprop="name">Home</span>
                </a>
                <meta itemprop="position" content="1" />
              </li>
              <li class="breadcrumb__item">
                <span itemprop="item" class="link">
                  <span itemprop="name">Barbara Kollmeyer</span>
                </span>
                <meta itemprop="position" content="2" />
              </li>
            </ol>
          </div>
        </div>
        <!-- 作者信息 -->
        <div class="component component--module">
          <div class="column column--primary">
            <div class="element element--bio">
              <figure class="bio__figure">
                <a class="figure__image">
                  <img v-if="authorList.avatar == null" src="https://images.barrons.com/im-63581282" alt="" />
                  <img v-else alt="Photo of Author" :src="authorList.avatar" /></a>
              </figure>
              <div class="bio__content">
                <header class="header header--page">
                  <h1 class="title">
                    <span class="label">{{ authorList.name }}</span>
                  </h1>
                  <!-- <small class="secondary">
                    <span class="bio__position">Senior European Editor</span>
                    <span class="bio__company">Sinopoly Watch</span>
                  </small> -->
                </header>
                <ul class="list list--social">
                  <li class="social__item">
                    <a class="icon icon--twitter" target="_blank"></a>
                  </li>
                  <li class="social__item">
                    <a class="icon icon--mail" target="_blank"></a>
                  </li>
                </ul>
                <p class="paragraph"></p>
                <p>
                  {{ authorList.introduce }}
                </p>
                <p></p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <mastPopular></mastPopular>
    <newsViewer v-if="isRegion" :newsData="fetuData" :newstitle="newstitle" @toTop="toTop"></newsViewer>
  </main>
</template>
<script setup>
// 引入 MOST POPULAR 组件
import mastPopular from "@/views/home/mastPopular/mastPopular";
import newsViewer from "@/views/latestNews/hotheHeadlines/newsViewer/newsViewer";
import homeRequest from "@/api/home.js";
import { useRoute } from "vue-router";
const route = useRoute();
// watch(
//     () => route.params.id, // 或者 route.query 根据你需要监听的参数类型
//     async (newParams, oldParams) => {
//       console.log(newParams)
//         const data = await getDetail(newParams);
//         detailsform.value = data.id
//     },
//     {
//         deep: true, // 深度监听对象内部属性的变化
//     }
// );
onMounted(async () => {
  await getAuthor(route.params.id);
  frontData();
});
onMounted(() => {
  getAuthor()
  frontData()
})
// 新闻列表 头部左边大图stcoks关键字部分
const authorList = ref({})
const isauthor = ref(false)
const getAuthor = () => {
  let data = {
    id: '1'
  }
  homeRequest.getAuthor(data)
    .then((res) => {
      if (res.code == "0") {
        authorList.value = res.data;
        isauthor.value = true;
      }
    })
    .catch((e) => { });
};
const FrontData = ref([]);
const fetuData = ref([]);
const isRegion = ref(false);

let newstitle = ref({
  title: "MORE FROM BARBARA KOLLMEYER",
  content: "",
});
function frontData() {
  //新闻列表
  let data = {
    key: "s",
  };
  homeRequest
    .getgroupData(data)
    .then((res) => {
      if (res.code == "0") {
        FrontData.value = res.data;
        if (FrontData.value.auto !== null) {
          fetuData.value = FrontData.value.auto.news;
        }
        isRegion.value = true;
      }
    })
    .catch((e) => {
      console.log("login error", e);
    });
}
const toTop = () => {
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
}
</script>
<style lang="scss" scoped>
.icon--twitter:before {
  content: "\e928";
}

.icon--mail:before {
  content: "\e950";
}
</style>
